<template>
    <layout-default
            name="account"
            :loaded="true">
        <van-cell-group title="资料">
            <van-cell title="头像" is-link>
                <div class="a-avatar">
                    <img :src="profile.avatar | avatar" alt="">
                </div>
            </van-cell>
            <van-cell title="昵称" :value="profile.nickname" is-link />
            <van-cell title="简介" :value="profile.saying_text" is-link />
        </van-cell-group>
        <van-cell-group title="安全">
            <van-cell title="密码" label="服务尚未开放，敬请谅解！" />
        </van-cell-group>
    </layout-default>
</template>

<script>
    import { mapState } from 'vuex'
    export default {
        computed: {
            ...mapState('user', ['profile'])
        }
    }
</script>

<style lang="less">
    .account{
        .van-cell{
            display: flex;
            align-items: center;
        }
        .a-avatar{
            display: inline-block;
            width:100px;
            height: 100px;
            border-radius: 50px;
            overflow: hidden;
            img{
                width:100%;
                height: 100%;
            }
        }
    }
</style>